<template>
  <ProjectInfo
    :preview="true"
    :projectId="`${route.query.projectId}`"
    :reportType="'PPTC'"
    :sign="true"
    :upload="true"
    @preview-file="previewFile"
    @upload="handleImport"
  />
  <ContentWrap class="chem-record-wrap">
    <div style="position: relative">
      <el-tabs v-model="activeTab" class="chem-tabs" tab-position="top" type="border-card">
        <el-tab-pane label="噪声结果计算" name="noise">
          <NoiseDataProcessing :formData="noise" @update-records="handleUpdateRecords" />
        </el-tab-pane>
        <el-tab-pane label="高温结果计算" name="highTemperature">
          <HighTemperatureataProcessing :formData="highTemperature" @update-records="handleUpdateRecords" />
        </el-tab-pane>
        <el-tab-pane label="工频电场计算" name="powerFrequency">
          <PowerFrequencyProcessing :formData="powerFrequency" @update-records="handleUpdateRecords" />
        </el-tab-pane>
        <el-tab-pane label="手传振动计算" name="handTransmitted">
          <HandTransmittedProcessing :formData="handTransmitted" @update-records="handleUpdateRecords" />
        </el-tab-pane>
        <el-tab-pane label="Cste结果计算" name="cste">
          <CstsDataProcessing :formData="cste" @update-records="handleUpdateRecords" />
        </el-tab-pane>
        <el-tab-pane label="Ctwa结果计算" name="ctwa">
          <CtwaDataProcessing :formData="ctwa" @update-records="handleUpdateRecords" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </ContentWrap>
  <UploadResult ref="importFormRef" :projectId="projectId" @success="getGetProjectDataProcessing" />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { useRoute } from 'vue-router'
import { ProjectApi } from '@/api/dk/project'
import ProjectInfo from './ProjectInfo.vue'
import UploadResult from './UploadResult.vue'
import CstsDataProcessing from './CstsDataProcessing.vue'
import CtwaDataProcessing from './CtwaDataProcessing.vue'
import NoiseDataProcessing from './NoiseDataProcessing.vue'
import HighTemperatureataProcessing from './HighTemperatureataProcessing.vue'
import PowerFrequencyProcessing from './PowerFrequencyProcessing.vue'
import HandTransmittedProcessing from './HandTransmittedProcessing.vue'

import { ElMessage } from 'element-plus'

const activeTab = ref(localStorage.getItem('DataProcessingIndex') || 'cste')
const route = useRoute()
const router = useRouter()

defineOptions({ name: 'HarmfulFactorsIndex' })

interface WeatherRecord {
  id: string
  sampleDate: string
  temperature: string
  airPressure: string
  weather: string
  humidity: string
}

const importFormRef = ref()
const handleImport = () => {
  importFormRef.value.open()
}

const cste = ref([])

const ctwa = ref([])
const noise = ref([])
const highTemperature = ref([])
const powerFrequency = ref([])
const handTransmitted = ref([])

// 使用计算属性进行转换和验证
const projectId = computed((): number | null => {
  return route.query.projectId
})

const handleUpdateRecords = (updatedRecords: WeatherRecord[]) => {
  ElMessage.success('修改成功')
}

/** 添加开始调查方法 */
const previewFile = () => {
  // 跳转到现场调查页面，并携带项目信息
  const { projectId, projectNo } = route.query
  router.push({
    path: '/previewFile',
    query: {
      projectId: projectId,
      projectNo: projectNo,
      operationType: 8
    }
  })
}

const getGetProjectDataProcessing = async () => {
  const projectId = route.query.projectId
  if (!projectId) return
  const response = await ProjectApi.getGetProjectDataProcessing(Number(projectId))
  cste.value = response.cste || []
  ctwa.value = response.ctwa || []
  noise.value = response.noise || []
  highTemperature.value = response.highTemperature || []
  powerFrequency.value = response.powerFrequency || []
  handTransmitted.value = response.handTransmitted || []
  console.log('response:', JSON.stringify(noise.value))
}

watch(activeTab, (val) => {
  localStorage.setItem('DataProcessingIndex', val)
})

onMounted(async () => {
  await getGetProjectDataProcessing()
})
</script>

<style lang="scss" scoped>
.chem-tabs {
  // 保持极简无圆角无阴影
  :deep(.el-tabs__item) {
    font-size: 16px;
  }
}

.record-item {
  margin-bottom: 60px;
}
</style>
